<template>
	<view class="app">
		<z-paging
			show-refresher-update-time
			show-refresher-when-reload
			v-model="list"
			ref="paging"
			@query="queryList"
		>
			<view class="boxs">
				<view class="box" v-for="(i, ix) in cates" :key="ix">
					<u-count-to
						font-size="32"
						color="#fff"
						bold
						:start-val="0"
						:end-val="i.val"
						:decimals="i.dec"
					></u-count-to>
					<text style="margin-top: 4rpx">{{ i.text }}</text>
				</view>
			</view>
			<view class="balac">
				<view class="name">
					{{ vk.pubfn.priceFilter(vk.getVuex("$user.userInfo.account_reward.allow")) }}
				</view>
				<view class="btn" @tap="vk.navigateTo('/pages/salesman/withdraw')">提现</view>
				<view class="btn" @tap="vk.navigateTo('/pages/salesman/withdraw-log')">
					提现记录
				</view>
			</view>
			<view class="item" @tap="vk.navigateTo('/pages/salesman/code')">
				<image
					src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/inv-icon-1.png"
					class="icon"
				></image>
				<text class="text">推广分销：广告媒介</text>
				<text>推广码</text>
				<u-icon name="nav-back" color="#333" size="30"></u-icon>
			</view>
			<view class="item" @tap="vk.navigateTo('/pages/salesman/list')">
				<image
					src="https://mp-d0bdc000-db91-44a8-852b-e6f607a7ca19.cdn.bspapp.com/inv-icon-2.png"
					class="icon"
				></image>
				<text class="text">好友列表</text>
				<u-icon name="nav-back" color="#333" size="30"></u-icon>
			</view>
			<view class="title">分佣明细</view>
			<block v-for="i in list" :key="i._id">
				<reward-item :info="i"></reward-item>
			</block>
		</z-paging>
	</view>
</template>

<script>
import rewardItem from "./components/reward-item"

export default {
	components: { rewardItem },
	data() {
		return {
			cates: [
				{ val: 0, dec: 0, text: "好友数" },
				{ val: 0, dec: 2, text: "订单总金额" },
				{ val: 0, dec: 0, text: "订单总数" },
				{ val: 0, dec: 2, text: "订单总佣金" }
			],
			list: []
		}
	},
	onLoad() {
		uni.$on("saleRefresh", () => {
			this.$refs.paging.reload()
		})
	},
	methods: {
		// 查询列表
		queryList(pageIndex, pageSize) {
			vk.callFunction({
				url: "client/user.queryRewardList",
				data: { pageSize, pageIndex },
				success: res => {
					if (pageIndex === 1) {
						this.cates[0].val = res.count[0]
						this.cates[1].val = res.count[1]
						this.cates[2].val = res.count[2]
						this.cates[3].val = res.count[3]
					}
					this.$refs.paging.complete(res.rows)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.boxs {
	padding: 30rpx 36rpx;
	background: linear-gradient(360deg, #24c388 0%, #3dd5a6 100%);
	display: flex;
	flex-wrap: wrap;
	position: relative;
	border-bottom: 20rpx solid #24c388;
	z-index: 1;
	&::before {
		content: "";
		display: block;
		position: absolute;
		width: 0;
		height: 180rpx;
		border-right: 1rpx solid #ffffff;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.3;
	}
	&::after {
		content: "";
		display: block;
		position: absolute;
		width: calc(100% - 72rpx);
		height: 0;
		border-bottom: 1rpx solid #ffffff;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		opacity: 0.3;
	}
	.box {
		width: 50%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		color: #fff;
		font-size: 24rpx;
		padding: 36rpx 0;
	}
}

.balac {
	height: 108rpx;
	background: linear-gradient(180deg, #fbedd6 0%, #f4d7ac 100%);
	border-radius: 20rpx;
	margin-top: -20rpx;
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	.btn {
		padding: 6rpx 24rpx;
		border-radius: 28rpx;
		border: 2rpx solid #333;
		font-size: 26rpx;
		margin-left: 16rpx;
	}
	.name {
		flex: 1;
		font-weight: bold;
		font-size: 34rpx;
		line-height: 40rpx;
	}
	.name::before {
		content: "可提现佣金：";
		display: inline-block;
		font-weight: normal;
		font-size: 26rpx;
		transform: translateY(-2rpx);
	}
}

.item {
	display: flex;
	align-items: center;
	padding: 30rpx 24rpx;
	font-weight: bold;
	color: #24c388;
	position: relative;
	background-color: #fff;
	margin-top: -2rpx;
	&::after {
		content: "";
		display: block;
		position: absolute;
		width: calc(100% - 48rpx);
		height: 1rpx;
		background: #f5f5f5;
		left: 48rpx;
		top: 0;
		z-index: 2;
	}
	.icon {
		width: 62rpx;
		height: 62rpx;
		margin-right: 20rpx;
	}
	.u-icon {
		transform: rotate(180deg);
		margin-left: 6rpx;
	}
	.text {
		color: #333;
		margin-right: auto;
	}
}

.title {
	font-weight: bold;
	text-align: center;
	padding: 30rpx 0 0;
	background-color: #fff;
	border-top: 20rpx solid #f7f7f7;
	font-size: 30rpx;
	margin-bottom: 28rpx;
}
</style>
